	<template>
	<view class="content">
		<view class="top">
			<view class="img">
				<image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-wq/bj.png" mode=""></image>
			</view>
		</view>
		<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="true" :custom="custom"
			:title="'进度查询'"></CustomNav>
		<view class="bottom">
			<view class="info-item">
				<view class="title" style="font-weight: 900;">
					提示
				</view>
				<view class="tips">
					投诉编码可在“我的投诉”中查看，每条投诉仅有
					⼀个投诉编码；输⼊投诉编码即可查看该进度。
				</view>
			</view>
			<view class="info-item">
				<view class="title">
					请输⼊您的投诉编码
				</view>
				<!-- <view class="box">
					<input class="a1" v-model="form.one" maxlength="1"/>
					<input class="a1" v-model="form.six" maxlength="1" type="number"/>
					<input class="a1" v-model="form.two" maxlength="1" type="number"/>
					<input class="a1" v-model="form.three" maxlength="1" type="number"/>
					<input class="a1" v-model="form.four" maxlength="1" type="number"/>
					<input class="a1" v-model="form.five" maxlength="1" type="number"/>
				</view> -->
				<view class="flex-between-center code-input-container" style="font-size: 42rpx;display: flex;">
								<!-- 页面显示 -->
								<input
									type="text"
									v-for="(item, index) in code_len"
									:key="index"
									disabled
									@tap="onCode"
									:value="form.code.length >= index + 1 ? form.code[index] : ''"
									class="code-input-item flex-default-center"
									style="border: 1px solid #027BFF;margin-right: 15rpx;"
								/>
				</view>
				<input v-if="is_focus" @blur="blurCode" @input="setCode" type="text" class="code-input" v-model="form.code" :maxlength="code_len" :focus="true"/>
			</view>
		</view>
		<view class="btn" @click="navigate">
			完成
		</view>
	</view>
</template>

<script>
	import {
		getCustomNav
	} from '@/util/util.js'
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				code_len: 6,
				is_focus: false,
				tabType: 1,
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				form: {
					code: '',
					// one: '',
					// two: '',
					// three: '',
					// four: '',
					// five: '',
					// six: ''
				},
				rules: {
					code:{
						name: '编码',
						required: true
					},
					// one: {
					// 	name: '编码',
					// 	required: true
					// },
					// two: {
					// 	name: '编码',
					// 	required: true
					// },
					// three: {
					// 	name: '编码',
					// 	required: true
					// },
					// four: {
					// 	name: '编码',
					// 	required: true
					// },
					// five: {
					// 	name: '编码',
					// 	required: true
					// },
					// six: {
					// 	name: '编码',
					// 	required: true
					// },
				},
				code: 0
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#117DFF';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		methods: {
			navigate(url) {
				// this.code = this.form.one + this.form.six + this.form.two + this.form.three + this.form.four + this.form
				// 	.five
				this.code = this.form.code
				console.log(validate(this.form, this.rules))
				if (validate(this.form, this.rules)) {
					uni.navigateTo({
						url: '/page_other/project_right/progress-query/detail?code=' + this.code
					})
				}
			},
			setCode(e) {
						this.form.code = e.detail.value;
					},
					onCode() {			
						this.is_focus = true;
					},
					blurCode() {
						this.is_focus = false;
			},
		},
		mounted() {
			this.custom = getCustomNav();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #F6F6F6;
		
		.font-26 {
			font-size: 26rpx;
		}
		.font-color-9b9ba5 {
			color: #9b9ba5;
		}
		.font-color-0078FF {
			color: #0078ff;
		}
		.login-container {
			padding: 0 30rpx;
		}
		.login-header {
			padding: 90rpx 0;
			.login-header-item {
				font-size: 42rpx;
				margin-bottom: 17rpx;
			}
		}
		.code-input {
			height: 0;
			width: 0;
		}
		.code-input-item {
			display: flex;
			width: 100rpx;
			height: 100rpx;
			border: 1px solid #9b9ba5;
			// justify-content: center;
			text-align: center;
		}

		.top {
			position: relative;
			width: 100%;
			height: 500rpx;

			.img {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
					z-index: -1;
				}
			}


		}

		.bottom {
			position: relative;
			width: 100%;
			border-radius: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #F6F6F6;
			border-radius: 45rpx 45rpx 0 0;
			z-index: 99;
			margin-top: -35rpx;

			.info-item {
				// position: absolute;
				// bottom: 40rpx;
				// left: 30rpx;
				// display: flex;
								// flex-direction: column;
				// align-items: center;
				// align-items: center;
				width: 100%;
				// height: 155rpx;
				padding: 30rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				background-color: #fff;
				margin-bottom: 30rpx;


				.title {
					text-align: center;
					margin: 20rpx 0;
					font-weight: 900;
				}

				.tips {
					line-height: 50rpx;
					text-indent: 2em;
				}

				.box {
					display: flex;
					width: 100%;
					height: 80rpx;
					box-sizing: border-box;
					margin: 50rpx 0 50rpx 10rpx;

					.a1 {
						margin-right: 20rpx;
						border: 1px solid #157DFA;
						width: calc((100% - 50rpx)/6);
						height: 120rpx;
						text-align: center;
						line-height: 120rpx;
						font-size: 50rpx;
						border-radius: 10rpx;
					}
				}
			}

		}

		.btn {
			width: 270rpx;
			height: 80rpx;
			border-radius: 40rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 30rpx auto;
			background-color: #157DFA;
		}
	}
</style>